<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.required,.err{color:red}
td{border:#9CF dotted 1px; font-size:12px; height:30px; line-height:30px; vertical-align:middle}
.align_right{text-align:right}
.success{color:green}

</style>
<script src="./js/jquery.js"></script>
<script>
	var canUse = false;
    var pok = false;
    var cok = false;
    var eok = false;
// 	var regexpUserName = /^[a-zA-Z][\da-zA-Z\_]{2,19}$/;
    var regexpPassword = /^[\da-zA-Z\_]{6,12}$/;
    var regexpEmail = /^[\da-zA-Z]{3,50}@\w+\.(cn|com|org|edu)(\.cn)?$/;

	function regNameValidate(val){
		canUse=false;
		//用户名的格式校验
		val=$.trim(val);
		
		if(val==""){
			$("#valmsg").html('用户名不可为空').addClass('err').removeClass('success');
			return;
		}else{
		var regExpName=/^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
		if(!regExpName.test(val)){
			$("#valmsg").html('用户名的格式不正确').addClass('err').removeClass('success');
			return;
		}else{		
	$.ajax({
		url:'validate.do',
		type:'post',
		dataType:'json',
		data:{"regName":val},
		async:true,
		success:function(data){
			if(data.ok){
				$("#valmsg").html('用户名可用').addClass('success').removeClass('err');
				canUse = true;
	 			}else{
	 			$("#valmsg").html('用户名已经被注册').addClass('err').removeClass('success');	
	 			}
		},
		error:function(){
			alert('服务器无法验证用户名合法性');
		}
	});
}
		}}


    function passwordValidate(val){
        pok = false;
        val = $.trim(val);
        if(!regexpPassword.test(val)){
            $("#valmsg2").html('密码格式不正确！').addClass('err').removeClass('success');
            return;
        }else{
            pok=true;
            $("#valmsg2").html('密码有效').addClass('success').removeClass('err');
            return;
        }
    }


    function confirmpasswordValidate(val){
        cok = false;
        val = $.trim(val);
        var pwdl = document.getElementsByName("pwd");
        var pwd = pwdl[0].value;
        if(val!=pwd){
            $("#valmsg3").html('密码不同，请重新输入！').addClass('err').removeClass('success');
            return;
        }else{
            cok=true;
            $("#valmsg3").html('密码一致，请继续').addClass('success').removeClass('err');
            return;
        }
    }

    function emailValidate(val){
        eok= false;
        cal=$.trim(val);
        if(!regexpEmail.test(val)){
            $("#valmsg4").html('邮箱格式不正确！').addClass('err').removeClass('success');
            return;
        }else{
            $.ajax({
            url:'validateEmail.do',
            type:'post',
            dataType:'json',
            data:{"email":val},
            async:true,
            success:function(data){
            if(data.ok){
                $("#valmsg4").html('邮箱有效').addClass('success').removeClass('err');
                eok = true;
                }else{
                $("#valmsg4").html('该邮箱已被注册！').addClass('err').removeClass('success');   
                }
       		},
        	error:function(){
            	alert('服务器无法验证邮箱合法性');
        		}
    		});
			}  
            eok=true;
            $("#valmsg4").html('邮箱有效').addClass('success').removeClass('err');
            return;
        }
    

	function toReg(){
		if(pok&&canUse&&cok&&eok){
			document.forms[0].submit();
		}
		
	}
	
</script>

</head>

<body>
     <div style=" width:800px; margin:auto; margin-top:100px; box-shadow:#069 5px 5px 5px;">
     当前位置：首页 >个人注册
     <hr/>
     <form action="add.do" method = "post">
     <table style="width:100%; border:#03C solid 1px; border-collapse:collapse">
         <tr>
            <td colspan="2" style="background:url(img/bar_1px.jpg) repeat-x; height:35px; line-height:35px; font-size:14px; font-weight:bold">用户基本信息（<font class="required">*</font>为必填信息）
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>用户名
            </td>
            <td><div>以字母开头，字母与数字或者下划线的组合（3-20位）</div>
              <input type="text" name = "regName" onchange="regNameValidate(this.value)"/>
              <label id="valmsg"></label>
            </td> 
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>密码
           </td>
            <td><div>字母与数字或者下划线的组合（6-12位）</div>
                <input type="password" name="pwd" onchange="passwordValidate(this.value)" />
                <label id="valmsg2"></label>
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>确认密码
            </td>
            <td><input type="password" name="pwdconfirm" onchange="confirmpasswordValidate(this.value)"/>
            <label id="valmsg3"></label>
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>电子邮件
            </td>
            <td><input type="text" name="email" onchange="emailValidate(this.value)" />
            <label id="valmsg4"></label>
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>密码找回问题
            </td>
            <td><input type="text" name="question" />
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>密码找回答案
            </td>
            <td><input type="text" name="answer"/>
            </td>
         </tr>
         <tr>
            <td class="align_right"><font class="required">*</font>验证码
            </td>
            <td><input type="text" name="code"/>
            <%
	int ran = (int)(Math.random()*10000);
	String code = String.valueOf(ran);
	session.setAttribute("code",code);
	out.print(code);
%>
            </td>

         </tr>
     </table>
     <div style=" width:100%; text-align:center">
     	<label style="color:red">>${msg }</label>
         <button type="button" onclick="window.location='reg_protocal.html'">上一步</button>
         <button type="button" value="下一步" onclick="toReg()">下一步</button>
     
     </div>
     </form>
     </div>
     
</body>
</html>
